<template>
  <div>
    <el-radio-group v-model="goodRadio" @change="changeList">
      <el-radio :label="0">全部商品参与</el-radio>
      <el-radio :label="1">指定商品参与</el-radio>
      <el-radio :label="2">指定商品不参与</el-radio>
      <!-- <el-radio :label="3">回收返券</el-radio> -->
    </el-radio-group>
    <div class="addCompent" v-if="goodRadio !== 0 && goodRadio !== 3">
      <div class="tableBox" v-if="pointGoodsList.length > 0">
        <div class="tableBox__top">
          <div class="tableBox__top--left">商品信息</div>
          <div class="tableBox__top--right">操作</div>
        </div>
        <div v-for="(item, index) in pointGoodsList" :key="index" class="tableBox__content">
          <div class="tableBox__content--left">
            <img :src="item.pic" alt class="tableBox__content--left--img" />
            <div style="color:#FE5F4B">
              <div style="color:#40B8FF">{{ item.name }}</div>
              <div v-if="item.limitType === 0">
                <span v-if="item.minPrice > 0">￥{{ item.minPrice }}</span>
                <span v-else>￥{{ item.maxPrice }}</span>
              </div>
              <div v-else>￥{{ item.minPrice }}~￥{{ item.maxPrice }}</div>
            </div>
          </div>
          <div
            class="tableBox__content--right"
            @click="pointGoodsList.splice(index, 1)"
            style="cursor: pointer;"
          >删除</div>
        </div>
      </div>
      <div class="tableBox__bottom">
        <el-button type="primary" plain @click="goodsVisible = true">选择商品</el-button>
        <span
          style="color:#9B9B9B"
          v-if="pointGoodsList.length > 0"
        >已选择{{ pointGoodsList.length }}款商品</span>
      </div>
      <el-dialog
        :visible.sync="goodsVisible"
        width="50%"
        append-to-body
        :before-close="cancelOption"
      >
        <SelectGoods
          ref="selectGoods"
          :actType="actType"
          :pointGoodsList="pointGoodsList"
          :goodsVisible="goodsVisible"
          @changelist="changelist"
        ></SelectGoods>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelOption">取 消</el-button>
          <el-button type="primary" @click="sureDig">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- <div class="couponUpload" v-if="goodRadio === 3">
      <div class="couponUpload__baseUpload">
        <el-upload
          class="couponUpload__baseUpload--inUpload"
          :auto-upload="false"
          :on-change="uploadProductImg"
          action
          :show-file-list="false"
        >
          <img v-if="baseImg" :src="baseImg" />
          <i class="el-icon-plus" v-else></i>
        </el-upload>
        <div style class="position1">发券字段位置</div>
        <div style class="position2">按钮位置</div>
      </div>

      <div class="couponUploadTip">
        <div class="couponUploadTip__tip" style="height: 40px;margin-top:20px">
          <p>上传样式</p>
          <div>建议尺寸：750 * 1350px</div>
        </div>
        <div class="couponUploadTip__tipTwo">设计图片上传时，请将点击按钮尽量对其按钮位置，并在字段位置留空</div>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Ref, Watch } from "vue-property-decorator";
import SelectGoods from "./SelectGoods.vue";

@Component({
  components: {
    SelectGoods,
  },
})
export default class ApointGoods extends Vue {
  @Ref()
  readonly selectGoods: HTMLFormElement;

  /** 获取活动类型 */
  @Prop({
    type: String,
    default() {
      return "";
    },
  })
  actType: any;

  /** 获取优惠券或满减详情 */
  @Prop({
    type: Object,
    default() {
      return {};
    },
  })
  content: any;

  @Watch("content")
  getContent() {
    this.getContentDetail();
  }

  /** 当前单选框内容 */
  goodRadio = 0;

  goodsVisible = false;

  /** 已选择商品数组 */
  pointGoodsList = [];

  /** 参加商品数组 */
  joinList = [];

  /** 不参加商品数组 */
  unJoinList = [];

  /** 回收返券上传图片 */
  baseImg = "";

  /**
   * 选择指定条件
   */
  changeList(e) {
    this.pointGoodsList = [];
    if (e === 1) {
      this.pointGoodsList = this.joinList;
    }

    if (e === 2) {
      this.pointGoodsList = this.unJoinList;
    }
  }

  /**
   * 获取优惠券或满减详情
   */
  getContentDetail() {
    const temOption = JSON.parse(JSON.stringify(this.content));
    this.goodRadio = temOption.productType;
    if (this.actType === "AddChainActivity") {
      this.goodRadio = temOption.solitaireActivityVo.productType;
    }
    if (this.goodRadio === 2) {
      this.pointGoodsList = this.unJoinList = temOption.productVos;
    } else if (this.goodRadio === 1) {
      this.pointGoodsList = this.joinList = temOption.productVos;
    } else {
      this.pointGoodsList = temOption.productVos ? temOption.productVos : [];
    }
  }

  /**
   * 取消操作
   */
  cancelOption() {
    this.$confirm(
      "确定要退出选择商品页面? 退出后，未保存的信息将不会保留!",
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      },
    ).then(() => {
      this.goodsVisible = false;
      this.selectGoods.search = {
        ...this.selectGoods.search,
        maxPrice: "",
        minPrice: "",
        name: "",
        current: 1,
        size: 10,
      };
      this.selectGoods.goodsList.map(item => {
        return (item.isCheck = false);
      });
    }).catch(err=>{
      console.log(err)
    })
  }


  sureDig() {
    const list = this.selectGoods.selectpointGoodsList;
    if (this.goodRadio === 1) {
      this.joinList = list;
      this.goodsVisible = false;
      // list.forEach(item => {
      //   if (item.isCheck) {
      //     this.joinList.push(item);
      //   }
      //   item.isCheck = false;
      // });
      this.pointGoodsList = this.joinList;
    } else if (this.goodRadio === 2) {
      this.unJoinList = list;
      this.goodsVisible = false;
      // list.forEach(item => {
      //   if (item.isCheck) {
      //     this.unJoinList.push(item);
      //   }
      //   item.isCheck = false;
      // });
      this.pointGoodsList = this.unJoinList;
    }
  }
}
</script>

<style lang="scss" scoped>
.addCompent {
  margin-top: 10px;
}

@include b(tableBox) {
  width: 600px;
  border: 1px solid #e7e8eb;
  margin: 30px 0px 10px 0px;
  @include e(top) {
    height: 40px;
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    @include m(left) {
      width: 480px;
      border-right: 1px solid #e7e8eb;
    }

    @include m(right) {
      flex: 0 0 40px;
      margin-left: 5px;
    }
  }
  @include e(content) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 30px 0px 10px;
    border-bottom: 1px solid #e7e8eb;
    @include m(left) {
      display: flex;
      align-items: center;
      width: 500px;
      height: 60px;
      border-right: 1px solid #e7e8eb;
      @include m(img) {
        width: 50px;
        height: 50px;
        margin-right: 20px;
      }
    }

    @include m(right) {
      flex: 0 0 40px;
      margin-left: 5px;
    }
  }
  @include e(bottom) {
    width: 600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

// @include b(couponUpload) {
//   display: flex;

//   @include e(baseUpload) {
//     position: relative;
//     border: 2px dashed #e6e6e6;
//     width: 300px;
//     height: 400px;
//     border-radius: 10px;
//     padding: 10px;
//     margin-left: 20px;
//     margin-top: 40px;
//     display: flex;

//     @include m(inUpload) {
//       display: flex;
//       justify-content: center;
//       align-items: center;
//       height: 100%;
//       width: 100%;
//     }
//   }
// }

// .position1 {
//   position: absolute;
//   display: flex;
//   justify-content: center;
//   width: 70%;
//   background-color: rgba(0, 0, 0, 0.8);
//   color: white;
//   top: 40px;
//   left: 40px;
// }

// .position2 {
//   position: absolute;
//   display: flex;
//   justify-content: center;
//   width: 70%;
//   background-color: rgba(0, 0, 0, 0.8);
//   color: white;
//   bottom: 30px;
//   left: 40px;
// }

// .couponUploadTip {
//   display: flex;
//   flex-wrap: wrap;
//   height: 60px;
//   margin-top: 50px;

//   &__tip {
//     display: flex;
//     margin: 80px 0px 0px 40px;
//     p {
//       color: #2e99f3;
//       font-size: 14px;
//       margin-right: 30px;
//     }
//     div {
//       color: #cfcfcf;
//       font-size: 14px;
//     }
//   }

//   &__tipTwo {
//     color: #ff3b4b;
//     font-size: 14px;
//     margin-left: 40px;
//   }
// }
</style>
